<!--文件夹——查看视频弹框-->
<template>
  <ele-modal
    width="740px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    title="预览"
    @update:visible="updateVisible"
  >

    <video ref="video" style="width: 700px;height: 400px;"
           v-bind:src="videoUrl" v-bind:controls="controls" v-bind:playbackRate="playbackRate" v-bind:volume="volume"
           v-bind:currentTime="currentTime"></video>
<!--    网址：https://blog.csdn.net/Sunnyztg/article/details/131388652-->

    <!--    视频组件-->
    <!--    <video :src="videoUrl" style="width: 700px;height: 454px;" @play="onPlay" @pause="onPause"></video>-->
    <!--播放暂停 图标-->
    <!--<div  class="broadcast-hidden">
      <i :class="{'el-icon-video-pause': playing , 'el-icon-video-play':  !playing }" class="broadcast" @click="togglePlay"></i>
    </div>-->
    <div style="height: 20px"></div>
    <!-- <button @click="togglePlay">{{ playing ? 'Pause' : 'Play' }}</button>-->

  </ele-modal>
</template>

<script>
  export default {
    name: "look-video",
    props:{
      // 弹窗是否打开
      visible: Boolean,
      videoUrl:String//视频url
    },
    data(){
      return{
        playing: false,
        loading:false,

        /* 视频进度条start */
        controls: true,
        playbackRate: 1,
        volume: 1,
        currentTime: 0,
        subtitles: '',
        /* 视频进度条end */

      }
    },
    methods:{
      show(){
        const video = this.$el.querySelector('video');
        video.play();
      },
      togglePlay() {
        this.playing = !this.playing;
        const video = this.$el.querySelector('video');
        if (this.playing) {
          video.play();
        } else {
          video.pause();
        }
      },
      onPlay() {
        this.playing = true;
      },
      onPause() {
        this.playing = false;
      },
      /* 更新 visible */
      updateVisible(value) {
        this.loading=false
        this.$emit('update:visible', value);
      }
    }
  }
</script>

<style scoped lang="less">
  .broadcast{
    position: absolute;
    left: 330px;
    top: 180px;
    color: #efefef;
    font-size: 70px;
    z-index: 99;

    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    /*color: #bfbfbf;*/
    /*font-size: 50px;*/
  }
  .broadcast:hover {
    color:#7b7676
    /* box-shadow: 0 0 10px inset #0066cd;
     border-radius: 5px;*/
  }
  .broadcast-hidden{
    position: absolute;
    left: 0px;
    bottom: 0px;
    color: #efefef;
    z-index: 999;
    width:100%;
    height: 454px;
    opacity:0;

  }
  .broadcast-hidden:hover{
    opacity:1;

  }
  /*.broadcast-active{
    box-shadow: 0 0 10px inset #000000;
    border-radius: 5px;
  }*/
</style>
